<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue Style与Class操作</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			.red {
				color: red;
			}
			.green {
				color: green;
			}
			.font_26 {
				font-size: 26px;
			}
			.bg_blue {
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h3>Class操作</h3>
			<h4>通过对象语法控制样式类</h4>
			<p class="bg_blue" v-bind:class="{red: class_red, font_26: class_font_26}">这是一段测试内容，通过Vue控制class样式类</p>
			<h4>将样式类控制逻辑封装到JS中</h4>
			<p :class="green_18">我的样式类控制逻辑在JS中</p>
			<h4>通过计算函数控制class</h4>
			<p :class="myClass">我的样式类控制逻辑在JS中</p>
			<h4>通过数组语法控制样式类</h4>
			<p :class="[greenClass, font_26Class]">我的样式类是通过Vue数组语法控制的</p>
			<hr>
			<h3>Style操作</h3>
			<h4>通过Vue来控制样式</h4>
			<p :style="{color: pinkColor, fontSize: fontSize20}">我的样式代码的属性值是在Vue的数据中定义的</p>
			<p :style="myStyle2">我的样式代码完全那是通过Vue中的对象定义的</p>
			<h4>通过数组语法组合应用多个样式</h4>
			<p :style="[myStyle, myBgGreyStyle]">我的样式是通过计算函数动态杂交出来的</p>
			
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el:'#app',
			data: {
				class_red: true,
				class_font_26: false,
				green_18: {
					red: true,
					font_26: true
				},
				seconds: new Date().getSeconds(),
				greenClass: 'green',
				font_26Class: 'font_26',
				pinkColor: 'pink',
				fontSize20: '20px',
				myStyle2: {
					color: 'orange',
					fontSize: '20px'
				},
				myBgGreyStyle: {
					backgroundColor: 'grey'
				}
			},
			created: function(){
				setInterval(() => {
					this.seconds = new Date().getSeconds();
				}, 1000);
			},
			computed: {
				// 通过计算函数实现红绿颜色交替变换
				myClass: function(){
					return {
						red: this.seconds % 2 == 0,
						green: this.seconds % 2 != 0
					};
				},
				myStyle: function(){
					return {
						color: this.pinkColor,
						fontSize: this.fontSize20
					}
				}
			}
		})
	</script>
</html>
